import React, { useState, useEffect, useCallback} from 'react'
import { Link } from 'react-router-dom'
import { Table, Space, message } from 'antd'
import Nav from '../../components/nav'
import { fetchData } from '../../request'
import './style.scss'

const Member = props => {
  const [url, setUrl] = useState()
  const [member, setMember] = useState([])

  const getAllMember = useCallback(() => {
    fetchData({
      method: "post",
      url: "/makeUp/account/member",
      data: {
          parentId: localStorage.getItem('id')
      }
    }).then(res => {
      if(res.code === 200){
        setMember(res.data.map(item=>({name: item.userName, id: item.id})))
      }
    })
  }, [url])

  useEffect(() => {
    getAllMember()
  }, [])
  const hangleDelete = useCallback((text, record) => {
    fetchData({
      method: "post",
      url: "/makeUp/account/delete",
      data: {
        id: record.id
      }
    }).then(res => {
      if(res.code === 200){
        getAllMember();
        message.success('删除成功');
      }else{
        message.error("删除失败");
      }
    })
  }, [member])
  return (
    <div className="member-page">
      <div className="bg"></div>
      <Nav backUrl="/person"></Nav>
      <div className="member-box">
        {localStorage.getItem("role") != "STAFF" && <Link className="addPerson" to="/register">添加下属职工</Link>}
        <Table columns={[
          {
            title: '名字',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '操作',
            key: 'action',
            render: (text, record) => (
              <Space size="middle">
                <a onClick={() => {hangleDelete(text, record)}}>删除</a>
              </Space>
            ),
          },
        ]} 
        dataSource={member} 
      />
      </div>
    </div>
  )
}

export default Member;